<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        align-content设置侧轴上子元素的排列方式(多行)

        设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的

        这些的意思你懂的，我就不打出来了。
        flex-start:
        flex-end:
        center:
        space-around:
        space-between:
        stretch:

        align-items和align-content的区别：
            1. align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
            2. align-content适应于换行(多行)情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性
            3. 总结就是单行找align-items，多行找align-content
     -->
</body>
</html>